---
import useItemUrl from "@/hooks/useItemUrl";
export interface Props {
  src: string;
  count?: number;
  alt?: string;
  title?: string;
  id?: string;
}

const { src, count = 1, alt, title, id } = Astro.props;
const url = useItemUrl(id);
---

{
  url === "" ? (
    <div class="w-8 h-8 relative" title={title}>
      <img class="w-full h-full !bg-transparent" src={src} alt={alt ?? ""} />
      {count != 1 && (
        <div
          class="absolute top-[18px] left-[26px] text-white text-sm"
          style="text-shadow: #000 1px 0 10px;"
        >
          {count}
        </div>
      )}
    </div>
  ) : (
    <>
      <a href={url} class="w-8 h-8 relative" title={title}>
        <img class="w-full h-full !bg-transparent" src={src} alt={alt ?? ""} />
      </a>
      {count != 1 && (
        <div
          class="absolute top-[18px] left-[26px] text-white text-sm"
          style="text-shadow: #000 1px 0 10px;"
        >
          {count}
        </div>
      )}
    </>
  )
}
